<template>
  <div>
     <div class="box" :style="{backgroundColor:backgroundColor,width:width,height:height}"></div>
      <div :class="['box','bgc','fon']">12423</div>
      <div class="box" :style="{backgroundColor:backgroundColor,fontSize:'42px'}">3333</div>
      <div :class="['box','bgc','fon']">123</div>
      <div :class="{box:true,bgc:true,fon:true}">123</div>
      <div :class="{box:true,bgc:true,fon:true}">325</div>
   </div>
</template>
 
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      // patch是补丁，虚拟dom是一个虚拟对象，模拟真实的dom
      backgroundColor:"pink",
      width:'200px',
      height:'200px',
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {}
};
</script>

<style scoped>
     .box{
      width: 200px;
      height: 200px;
     }
     .bgc{
      background-color: lightblue;
     }
     .fon{
      font-size: 24px;
     }
</style>